{extend name="base" /}
{block name="css"}
<style>
    .user-info-head {
        width: 110px;
        height: 110px;
        position: relative;
        display: inline-block;
        border-radius: 50%;
        border: 2px solid #eee;
    }

    .user-info-head:hover:after {
        content: '\e624';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #eee;
        background: rgba(0, 0, 0, 0.5);
        font-family: layui-icon;
        font-size: 28px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        cursor: pointer;
        line-height: 110px;
        border-radius: 50%;
    }

    .user-info-head img {
        width: 110px;
        height: 110px;
        border-radius: 50%;
    }

    .info-list-item {
        position: relative;
        padding-bottom: 8px;
    }

    .info-list-item > .layui-icon {
        position: absolute;
    }

    .info-list-item > p {
        padding-left: 30px;
    }

    .dash {
        border-bottom: 1px dashed #ccc;
        margin: 15px 0;
    }

    .bd-list-item {
        padding: 14px 0;
        border-bottom: 1px solid #e8e8e8;
        position: relative;
    }

    .bd-list-item .bd-list-item-img {
        width: 48px;
        height: 48px;
        line-height: 48px;
        margin-right: 12px;
        display: inline-block;
        vertical-align: middle;
    }

    .bd-list-item .bd-list-item-content {
        display: inline-block;
        vertical-align: middle;
    }

    .bd-list-item .bd-list-item-lable {
        margin-bottom: 4px;
        color: #333;
    }

    .bd-list-item .bd-list-item-oper {
        position: absolute;
        right: 0;
        top: 50%;
        text-decoration: none !important;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .user-info-form .layui-form-item {
        margin-bottom: 25px;
    }
    /** 应用列表样式 */
    .application-list-item {
        background-color: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        cursor: pointer;
        transition: all .2s;
    }

    .application-list-item:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    }

    .application-list-item .application-list-item-header {
        padding: 16px 12px 0 12px;
    }

    .application-list-item .application-list-item-header .head {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .application-list-item .application-list-item-header > h2 {
        color: #333;
        font-size: 18px;
        display: inline-block;
    }

    .application-list-item .application-list-item-body {
        padding: 5px 5px 0px 30px;
        font-size: 0;
    }

    .application-list-item .application-list-item-body .text-num-item {
        display: inline-block;
        width: 100%;
        font-size: 26px;
        color: #666;
    }

    .application-list-item .application-list-item-body .text-num-item .text-num-item-title {
        font-size: 12px;
        color: #999;
        margin-bottom: 2px;
    }

    .application-list-item .application-list-item-body .text-num-item small {
        font-size: 16px;
    }

    .application-list-item .application-list-item-tool {
        font-size: 0;
        background-color: #FAFAFA;
        border-top: 1px solid #e8e8e8;
        padding: 10px 0 5px 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .application-list-item .application-list-item-tool .application-list-item-tool-item {
        display: inline-block;
        width: 25%;
        font-size: 18px;
        text-align: center;
        color: #999;
        border-right: 1px solid #e8e8e8;
        box-sizing: border-box;
        cursor: pointer;
    }

    .application-list-item .application-list-item-tool .application-list-item-tool-item:last-child {
        border-right: none;
    }

    /** // 应用列表样式结束 */

</style>
{/block}
{block name="body"}
<!-- 左 -->
<div class="layui-col-sm12 layui-col-md3">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 25px;">
            <div class="text-center layui-text">
                <div class="user-info-head" >
                    <img src="{$data.image|default='/static/img/no_image_100x100.jpg'}" width="100" height="100"/>
                </div>
                {if $data.company}<h2 style="padding-top: 20px;">{$data.company}</h2>{/if}
                {if $data.name}<p style="padding-top: 8px;">{$data.name}</p>{/if}
            </div>
            <div class="layui-text" style="padding-top: 10px;">
                {foreach name="field" item="r"}
                {if $r.is_status == '1' && ($r.type == 'text' ||$r.type == 'date' ||$r.type == 'category' ||$r.type == 'from' ||$r.type == 'industry' ||$r.type == 'tag' ||$r.type == 'status')}
                {if $r.field != 'company' && $r.field !== 'name'}
                <div class="layui-form-item">
                    <label class="layui-form-label {if $r.is_required == '1'}layui-form-required{/if}">{$r.name}:</label>
                    <div class="layui-input-block" style="padding-top:8px;">
                        {$data[$r['field']]}
                    </div>
                </div>
                {/if}
                {elseif $r.is_status == '1' && ($r.type == 'address')}
                <div class="layui-form-item">
                    <label class="layui-form-label {if $r.is_required == '1'}layui-form-required{/if}">{$r.name}:</label>
                    <div class="layui-input-block" style="padding-top:8px;">
                        {$data.province}{$data.city}{$data.region}{$data.address}
                    </div>
                </div>
                {/if}
                {/foreach}
            </div>
            <!--div class="dash"></div>
            <h3>标签</h3>
            <div class="layui-badge-list" style="padding-top: 6px;">
                <span class="layui-badge layui-bg-cyan">分类:{$data.classify_name}</span>
                <span class="layui-badge layui-bg-gray">来源:{$data.comefrom_name}</span>
                <span class="layui-badge layui-bg-green">状态:{$data.status_name}</span>
            </div>
            <div class="dash"></div>
            <h3>快捷操作</h3>
            <div class="layui-badge-list" style="padding-top: 6px;">
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn">增加</button>
                    <button type="button" class="layui-btn">编辑</button>
                    <button type="button" class="layui-btn">删除</button>
                </div>

            </div-->
        </div>
    </div>
</div>
<!-- 右 -->
<div class="layui-col-sm12 layui-col-md9">
    <div class="layui-card">
        <div class="layui-card-body">

            <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                <ul class="layui-tab-title">
                    <li{if $show == 'track'} class="layui-this"{/if}>回访记录</li>
<!--                    <li{if $show == 'sales'} class="layui-this"{/if}>销售记录</li>-->
                    <li{if $show == 'contract'} class="layui-this"{/if}>合同管理</li>
                    <li{if $show == 'notice'} class="layui-this"{/if}>提醒消息</li>
                    <div class="layui-btn-group" style="float:right">
                        {if auth_url('crm/customer/edit')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/customer/edit',['id'=>$data['id']])}" data-width="80%" data-height="100%">修改客户</a>
                        {/if}
                        {if auth_url('crm/track/add')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/track/add',['customer_id'=>$data['id']])}" data-width="50%" data-height="100%">添加回访</a>
                        {/if}
                        {if auth_url('crm/sales/add')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/sales/add',['customer_id'=>$data['id']])}" data-width="50%" data-height="100%">添加销售</a>
                        {/if}
                        {if auth_url('crm/contract/add')}
                        <a class="layui-btn ajax-iframe" href="{:url('crm/contract/add',['customer_id'=>$data['id']])}" data-width="50%" data-height="100%">添加合同</a>
                        {/if}
                    </div>
                </ul>
                <div class="layui-tab-content">
                    <!--回访-->
                    <div class="layui-tab-item {if $show == 'track'} layui-show{/if}">
                        <!-- 权限列 -->
                        <script type="text/html" id="type">
                            {{# if(d.type == '0'){ }}
                            <a class="layui-btn layui-btn-sm layui-btn-primary">系统记录</a>
                            {{# }else if(d.type == '1'){ }}
                            <a class="layui-btn layui-btn-normal layui-btn-sm">客服跟进</a>
                            {{# } }}
                        </script>
                        <!-- 权限列 -->
                        <script type="text/html" id="user">
                            <a  class="layui-btn layui-btn-primary layui-btn-sm">{{d.user.name}}</a>
                        </script>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableTBTrack">
                            {if auth_url('crm/track/edit')}
                            <a href="{:url('crm/track/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="420px" data-height="100%">修改</a>
                            {/if}
                            {if auth_url('crm/track/del')}
                            <a href="{:url('crm/track/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
                            {/if}
                        </script>

                        <table id="tableTrack" lay-filter="tableTrack"></table>

                    </div>
                    <!--销售-->
<!--                    <div class="layui-tab-item {if $show == 'sales'} layui-show{/if}">-->
<!--                        <table id="tableOrder" lay-filter="tableOrder"></table>-->
<!--                        <script type="text/html" id="tableEditOrder">-->
<!--                            {if auth_url('crm/sales/edit')}-->
<!--                            <a href="{:url('crm/sales/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="50%" data-height="100%">修改</a>-->
<!--                            {/if}-->
<!--                            {if auth_url('crm/sales/del')}-->
<!--                            <a href="{:url('crm/sales/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>-->
<!--                            {/if}-->
<!--                        </script>-->
<!--                    </div>-->
                    <!--合同-->
                    <div class="layui-tab-item {if $show == 'contract'} layui-show{/if}">
                        <!-- 权限列 -->
                        <script type="text/html" id="product">
                            {{#  layui.each(d.get_product, function(index, item){ }}
                            <a class="layui-btn layui-btn-primary layui-btn-sm">{{item}}</a>
                            {{#  }); }}
                        </script>
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableTBcontract">
                            {if auth_url('crm/contract/edit')}
                            <a href="{:url('crm/contract/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="50%" data-height="100%">修改</a>
                            {/if}
                            {if auth_url('crm/contract/del')}
                            <a href="{:url('crm/contract/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
                            {/if}
                        </script>

                        <table id="tableContract" lay-filter="tableContract"></table>

                    </div>
                    <!--提醒-->
                    <div class="layui-tab-item {if $show == 'notice'} layui-show{/if}">
                        <!-- 表格操作列 -->
                        <script type="text/html" id="tableTBnotice">
                            {{# if(d.status == '0'){ }}
                            <a href="{:url('crm/notice/edit')}?id={{d.id}}&status=1" class="layui-btn layui-btn-sm ajax-action">未读</a>
                            {{# }else{ }}
                            <a href="{:url('crm/notice/edit')}?id={{d.id}}&status=0" class="layui-btn layui-btn-primary layui-btn-sm ajax-action">已读</a>
                            {{# } }}
                            <a href="{:url('crm/notice/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
                        </script>
                        <!-- 权限列 -->
                        <script type="text/html" id="noticetype">
                            {{# if(d.type == 'track'){ }}
                            <a class="layui-btn layui-btn-sm layui-btn-normal">跟进/回访提醒</a>
                            {{# }else if(d.type == 'contract'){ }}
                            <a class="layui-btn layui-btn-normal layui-btn-sm">合同事项提醒</a>
                            {{# }else if(d.type == 'birthday'){ }}
                            <a class="layui-btn layui-btn-normal layui-btn-sm">生日提醒</a>
                            {{# }else if(d.type == 'other'){ }}
                            <a class="layui-btn layui-btn-normal layui-btn-sm">其他提醒</a>
                            {{# } }}
                        </script>

                        <table id="tableNotice" lay-filter="tableNotice"></table>

                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var dropdown = layui.dropdown;

        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableTrack',
            data:{:json_encode($track)},
            page: true,
            cols: [[
                {templet: '#type', align: 'center', sort: true, title: '类型'},
                {field: 'remark', align: 'left', sort: true, title: '记录详情', minWidth: 400},
                {templet: '#user', align: 'left', sort: true, title: '操作用户'},
                {field: 'create_time', align: 'center', sort: true, title: '创建时间'},
                {align: 'center', toolbar: '#tableTBTrack', title: '操作', minWidth: 200}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });

        // 渲染销售表格
        var insTb = table.render({
            elem: '#tableOrder',
            url: "{:url('crm/sales/index_json',['customer_id'=>$data['id']])}",
            page: true,
            cols: [[
                {field: 'update_time', align: 'center', sort: true, title: '时间', width: 200},
                {field: 'user_name', align: 'center', sort: true, title: '用户',},
                {field: 'price', align: 'center', sort: true, title: '金额',},
                {align: 'center', toolbar: '#tableEditOrder', title: '操作', minWidth: 200}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });

        // 渲染合同表格
        var insTb = table.render({
            elem: '#tableContract',
            data:{:json_encode($contract)},
            page: true,
            cols: [[
                {type:'numbers',title:'#'},
                {field: 'datetime', align: 'left', sort: true, title: '签单日期'},
                {field: 'contract_no', align: 'left', sort: true, title: '合同编号'},
                {field: 'start_time', align: 'left', sort: true, title: '起始日期'},
                {field: 'end_time', align: 'left', sort: true, title: '到期日期'},
                {field: 'price', align: 'left', sort: true, title: '合同金额'},
                {templet: '#product', align: 'left', sort: true, title: '产品',width: 250},
                {templet: '#user', align: 'left', sort: true, title: '操作用户',width: 120},
                {field: 'create_time', align: 'center', sort: true, title: '创建时间',width: 200},
                {align: 'center', toolbar: '#tableTBcontract', title: '操作', width: 160}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });
        // 渲染通知表格
        var insTb = table.render({
            elem: '#tableNotice',
            data:{:json_encode($notice)},
            page: true,
            cols: [[
                {type:'numbers',title:'#'},
                {templet: '#noticetype', align: 'left', sort: true, title: '类型'},
                {field: 'remark', align: 'left', sort: true, title: '提醒事项', minWidth: 350},
                {field: 'create_time', align: 'center', sort: true, title: '创建时间'},
                {align: 'center', toolbar: '#tableTBnotice', title: '操作', minWidth: 160}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });

    });
</script>
<script>
    /* 点击图片放大 */
    $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
        layer.photos({photos: {data: [{src: $(this).attr('src')}]}, shade: .1, closeBtn: true});
    });

</script>
{/block}